<template>
  <div>
    <el-col :span="span" class="f-item">
      <div class="f-item-content" :style="{height:height+'px', 'background-color':bgColor}">
        <el-col :span="8">
          <div class="f-icon" :style="{'height':height+'px','line-height':height+'px', 'font-size':(height/2) + 'px', 'color':iconColor}">
            <i :class="icon" ></i>
          </div>
        </el-col>
        <el-col :span="16" >
          <div class="f-title" :style="{'height':(height/2) + 'px','line-height':(height/2)+'px'}">
            {{title}}
          </div>
          <div class="f-subTitle" :style="{'height':(height/2) + 'px','line-height':(height/2)+'px'}">
            <count-to :start-val="0" :end-val="count"  :prefix="prefix" :suffix="suffix"/>
          </div>
        </el-col>
      </div>
    </el-col>
  </div>
</template>
<script>
import CountTo from 'vue-count-to'

export default {
  name: 'FBox',
  components: {
    CountTo
  },
  data () {
    return {
    }
  },
  props: {
    span: {
      type: Number,
      default: 6
    },
    bgColor: {
      type: String,
      default: '#FFFFFF'
    },
    height: {
      type: Number,
      default: 100
    },
    icon: {
      type: String,
      default: 'el-icon-s-promotion'
    },
    iconColor: {
      type: String,
      default: 'rgb(64, 158, 255)'
    },
    title: {
      type: String,
      default: ''
    },
    count: {
      type: Number,
      default: 0
    },
    prefix: {
      type: String,
      default: ''
    },
    suffix: {
      type: String,
      default: ''
    }
  }
}
</script>
<style scoped>
  .f-item{
    text-align: center;
  }
  .f-title{
    font-size: 14px;
    font-weight: bold;
    color: gray;
  }
  .f-subTitle{
    font-size: 16px;
    font-weight: bold;
    color: black;
  }
</style>
